<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>My App</title>
    <!-- Framework7 -->
    <link rel="stylesheet" href="style/css/framework7.min.css">
    <!-- custom app styles-->
    <link rel="stylesheet" href="style/css/font.css">
    <link rel="stylesheet" href="style/css/my-app.css">

</head>

<body>
    <!-- 全屏模式悬浮层 -->
    <div class="statusbar-overlay"></div>
    <!-- 左边栏悬浮层 -->
    <div class="panel-overlay"></div>
    <!-- 左边栏offcanvas-->
    <div class="panel panel-left panel-reveal">
        <div class="content-block">
            <p>这是左滑动栏</p>
        </div>
    </div>
    <!-- Views-->
    <div class="views">
        <!-- Your main view, should have "view-main" class-->
        <div class="view view-main">
            <!-- Top Navbar-->
            <div class="navbar">
                <div class="navbar-inner">
                    <div class="left">
                        <a href="#" class="link icon-only open-panel"> <i class="icon-list-thumbnails"></i>
                        </a>
                    </div>
                    <!-- We have home navbar without left link-->
                    <div class="center sliding">Eyas Life</div>
                    <div class="right">
                        <!-- Right link contains only icon - additional "icon-only" class-->
                        <a href="#" class="link icon-only"> <i class="icon-streamline-sync"></i>
                        </a>
                    </div>
                </div>
            </div>
            <!-- Pages, because we need fixed-through navbar and toolbar, it has additional appropriate classes-->
            <div class="pages navbar-through toolbar-through">
                <!-- Page, data-page contains page name-->
                <div class="page">
                    <!-- 搜索框 -->
                    <form class="searchbar">
                        <div class="searchbar-input">
                            <input type="search" placeholder="Search">
                            <a href="#" class="searchbar-clear"></a>
                        </div>
                        <a href="#" class="searchbar-cancel">取消</a>
                    </form>
                    <!-- 搜索浮动层-->
                    <div class="searchbar-overlay"></div>

                    <!-- Scrollable page content-->
                    <div class="page-content pull-to-refresh-content infinite-scroll">
                        <!-- Default pull to refresh layer-->
                        <div class="pull-to-refresh-layer">
                            <div class="preloader"></div>
                            <div class="pull-to-refresh-arrow"></div>
                        </div>

                        <!-- usual content below -->
                        <div class="list-block media-list list-items">
                            <ul>
                                <li>
                                    <a href="#" class="item-link item-content">
                                        <div class="item-inner">
                                            <div class="item-title-row">
                                                <div class="item-title">Cordova学习笔记——创建HelloWorld应用</div>
                                            </div>
                                            <div class="item-text"><i class="icon-clock"></i>2014-11-20</div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="item-link item-content">
                                        <div class="item-inner">
                                            <div class="item-title-row">
                                                <div class="item-title">Cordova学习笔记——创建HelloWorld应用</div>
                                            </div>
                                            <div class="item-text"><i class="icon-clock"></i>2014-11-20</div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="item-link item-content">
                                        <div class="item-inner">
                                            <div class="item-title-row">
                                                <div class="item-title">Cordova学习笔记——创建HelloWorld应用</div>
                                            </div>
                                            <div class="item-text"><i class="icon-clock"></i>2014-11-20</div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="item-link item-content">
                                        <div class="item-inner">
                                            <div class="item-title-row">
                                                <div class="item-title">Cordova学习笔记——创建HelloWorld应用</div>
                                            </div>
                                            <div class="item-text"><i class="icon-clock"></i>2014-11-20</div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="item-link item-content">
                                        <div class="item-inner">
                                            <div class="item-title-row">
                                                <div class="item-title">Cordova学习笔记——创建HelloWorld应用</div>
                                            </div>
                                            <div class="item-text"><i class="icon-clock"></i>2014-11-20</div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="item-link item-content">
                                        <div class="item-inner">
                                            <div class="item-title-row">
                                                <div class="item-title">Cordova学习笔记——创建HelloWorld应用</div>
                                            </div>
                                            <div class="item-text"><i class="icon-clock"></i>2014-11-20</div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="item-link item-content">
                                        <div class="item-inner">
                                            <div class="item-title-row">
                                                <div class="item-title">Cordova学习笔记——创建HelloWorld应用</div>
                                            </div>
                                            <div class="item-text"><i class="icon-clock"></i>2014-11-20</div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="item-link item-content">
                                        <div class="item-inner">
                                            <div class="item-title-row">
                                                <div class="item-title">Cordova学习笔记——创建HelloWorld应用</div>
                                            </div>
                                            <div class="item-text"><i class="icon-clock"></i>2014-11-20</div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="item-link item-content">
                                        <div class="item-inner">
                                            <div class="item-title-row">
                                                <div class="item-title">Cordova学习笔记——创建HelloWorld应用</div>
                                            </div>
                                            <div class="item-text"><i class="icon-clock"></i>2014-11-20</div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="item-link item-content">
                                        <div class="item-inner">
                                            <div class="item-title-row">
                                                <div class="item-title">Cordova学习笔记——创建HelloWorld应用</div>
                                            </div>
                                            <div class="item-text"><i class="icon-clock"></i>2014-11-20</div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <!-- Preloader -->
                        <div class="infinite-scroll-preloader">
                            <div class="preloader"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 底部导航-->
            <div class="toolbar tabbar">
                <div class="toolbar-inner">
                    <a href="#tab1" class="tab-link active">
                        <i class="icon-home-house-streamline"></i>
                    </a>
                    <a href="#tab3" class="tab-link">
                        <i class="icon-email-mail-streamline"></i>
                    </a>
                    <a href="#tab4" class="tab-link">
                        <i class="icon-logout"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- Path to Framework7 Library JS-->
    <script type="text/javascript" src="style/js/framework7.min.js"></script>
    <!-- Path to your app js-->
    <script type="text/javascript" src="style/js/my-app.js"></script>
</body>

</html>
